<template>
  <div class="lineChart">
    <div id="streamLine" class="echart"></div>
  </div>
</template>

<script>
import echarts from "@/utils/lib/echarts";
import { LineChart } from "echarts/charts";
import { dealElectricity } from "@/utils/index";
import {
  DataZoomComponent,
  VisualMapComponent,
  MarkLineComponent,
} from "echarts/components"; // 平移缩放功能按需引入
echarts.use([
  LineChart,
  DataZoomComponent,
  VisualMapComponent,
  MarkLineComponent,
]);
export default {
  name: "lineChat",
  props: {
    // 折线图数据
    lineData: {
      type: Object,
      default: {},
    },
    mapData: {
      type: Array,
      default: [],
    },
    precision: {
      type: Number,
      default: 2,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    // this.lineCharts(this.lineData);
  },
  beforeDestroy() {
    this.chartDes();
  },
  watch: {
    lineData: {
      handler(val) {
        if (val) {
          this.chartDes();
          this.lineCharts(this.lineData);
        }
      },
      deep: false,
      immediate: false,
    },
  },
  methods: {
    chartDes() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    lineCharts(lineData) {
      let fgg;
      if (lineData != undefined) {
        if (
          lineData.listASeries.length == 0 &&
          lineData.listBSeries.length == 0 &&
          lineData.listCSeries.length == 0
        ) {
          fgg = true;
        } else {
          fgg = false;
        }
      } else {
        fgg = true;
      }
      let xAxisObj = {};
      if (fgg) {
        xAxisObj = {
          type: "category",
          boundaryGap: true,
          data: [
            "01:00",
            "02:00",
            "03:00",
            "04:00",
            "05:00",
            "06:00",
            "07:00",
            "08:00",
            "09:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00",
            "24:00",
          ],
          splitNumber: 5,
        };
        lineData.listASeries = [0];
        lineData.listBSeries = [0];
        lineData.listCSeries = [0];
      } else {
        xAxisObj = {
          type: "time",
          boundaryGap: [0.02, 0.02], //坐标轴两边留白
        };
      }
      let option = {
        xAxis: xAxisObj,
        color: ["red", "green", "blue", "black"],
        dataZoom: {
          type: "slider", // slider  inside
          show: true,
          zoomLock: false, // 如果设置为 true 只能平移，不能缩放
          // xAxisIndex: [0], // 控制哪个X轴 多个X轴的时候生效
          // bottom: -5, // slider生效
          start: 0,
          end: 100, //初始化滚动条
        },
        grid: {
          left: "7%",
          right: "10%",
          bottom: "17%",
          // top: "10%",
          height:"70%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          name: lineData?.unit ?? "",
        },
        tooltip: {
          trigger: "axis",
          valueFormatter: function (value) {
            return value + lineData.unit;
          },
        },
        visualMap: {
          show: lineData.graphNum == 1 ? true : false,
          top: 0,
          right: 0,
          precision: this.precision, //设置小数精度，默认0没有小数
          pieces: this.mapData,
          outOfRange: {
            color: "#999",
          },
        },
        series: [
          {
            name: "A相",
            data: lineData.listASeries,
            showSymbol: false,
            type: "line",
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 3,
                },
              },
            },
            markLine: {
              lineStyle: {
                color: "#333",
              },

              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    padding: [0, 0, 0, -600],
                    formatter: function (params) {
                      let str =
                        params.data.name == 0
                          ? "max"
                          : params.data.name == 2
                          ? "avg"
                          : params.data.name == 1
                          ? "min"
                          : "";
                      if (params.value > 0) {
                        return str + params.value + lineData.unit;
                      } else {
                        return "";
                      }
                    },
                  },
                },
              },
              data:
                lineData.a && lineData.a.length > 0
                  ? lineData.a.map((item, index) => {
                      item = {
                        yAxis: Number(
                          dealElectricity(item ?? 0, lineData.multiple, 3)
                        ),
                        name: index,
                        label: {
                          show: true,
                          color:
                            index == 0
                              ? "red"
                              : index == 2
                              ? "#333"
                              : index == 1
                              ? "green"
                              : "",
                        },
                      };
                      return item;
                    })
                  : [],
            },
          },
          {
            name: "B相",
            data: lineData.listBSeries,
            showSymbol: false,
            type: "line",
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 3,
                  color: "#FBDB0F",
                },
              },
            },
            // markLine: {
            //   lineStyle: {
            //     color: "#333",
            //   },
            //   itemStyle: {
            //     normal: {
            //       label: {
            //         show: true,
            //         formatter: function (params) {
            //           let str =
            //             params.data.name == 0
            //               ? "max"
            //               : params.data.name == 2
            //               ? "avg"
            //               : params.data.name == 1
            //               ? "min"
            //               : "";
            //           return str + params.value;
            //         },
            //       },
            //     },
            //   },
            //   data:
            //     lineData.a && lineData.a.length > 0
            //       ? lineData.a.map((item, index) => {
            //           item = {
            //             yAxis: Number(
            //               dealElectricity(item ?? 0, lineData.multiple, 3)
            //             ),
            //             name: index,
            //             label: {
            //               show: true,
            //               color:
            //                 index == 0
            //                   ? "red"
            //                   : index == 2
            //                   ? "#333"
            //                   : index == 1
            //                   ? "green"
            //                   : "",
            //             },
            //           };
            //           return item;
            //         })
            //       : [],
            // },
          },
          {
            name: "C相",
            data: lineData.listCSeries,
            showSymbol: false,
            type: "line",
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 3,
                  color: "#FC7D02",
                },
              },
            },
            // markLine: {
            //   lineStyle: {
            //     color: "#333",
            //   },
            //   itemStyle: {
            //     normal: {
            //       label: {
            //         show: true,
            //         formatter: function (params) {
            //           let str =
            //             params.data.name == 0
            //               ? "max"
            //               : params.data.name == 2
            //               ? "avg"
            //               : params.data.name == 1
            //               ? "min"
            //               : "";
            //           return str + params.value;
            //         },
            //       },
            //     },
            //   },
            //   data:
            //     lineData.a && lineData.a.length > 0
            //       ? lineData.a.map((item, index) => {
            //           item = {
            //             yAxis: Number(
            //               dealElectricity(item ?? 0, lineData.multiple, 3)
            //             ),
            //             name: index,
            //             label: {
            //               show: true,
            //               color:
            //                 index == 0
            //                   ? "red"
            //                   : index == 2
            //                   ? "#333"
            //                   : index == 1
            //                   ? "green"
            //                   : "",
            //             },
            //           };
            //           return item;
            //         })
            //       : [],
            // },
          },
        ],
      };
      this.initChart("streamLine", option);
    },
    initChart(id, options) {
      this.chart = echarts.init(document.getElementById(id));
      this.chart.setOption(options);
      window.addEventListener("resize", () => {
        if (this.chart) {
          this.chart.resize();
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.lineChart {
  .echart {
    width: 100%;
    height: 240px;
  }
}
</style>
